
<template>
  <div id="app">
    <x-header style="background-color:#4786ff;" :left-options="{showBack: false}">盘点单 任务中
    </x-header>
    <div class="card">
      <div class="item">
        <span class="key">工号:</span>
        <span class="value">{{gh}}</span>
      </div>
      <div class="item">
        <router-link :to="{ path:'/scan/id', query: { gh:  gh} }" class="btn">
          <span class="key">已盘点卡片数:</span>
          <span class="value">{{size}}</span>
        </router-link>
      </div>
      <!-- <div class="itembtn"></div> -->
    </div>
    <div class="card" v-show="showDeptdata">
      <div class="item">
        <span class="key">部门:</span>
        <span class="value">{{bmmc}}</span>
      </div>
      <div class="itembtn" @click="showdialog" v-show="showqh">
        <x-button mini type="primary">切换</x-button>
      </div>
    </div>
    <div class="card" v-show="showDeptdata">
       <div class="item">
          <span class="key">单据号:</span>
          <span class="value">{{djh}}</span>
      </div>
    </div> 
   
    <tabbar >
      <tabbar-item>
        <span slot="label"> <x-button type="primary" class="sm-btn" @click.native="checkScan">扫码盘点</x-button></span>
      </tabbar-item>


    </tabbar>
<!--    <tabbar v-show="IsShowStart">
      <tabbar-item>

        <span slot="label"> <x-button type="primary" class="sm-btn" @click.native="ExecuteStoredProcedure">开始盘点</x-button></span>
      </tabbar-item>


    </tabbar>-->


    <div class="fhome-wrapper">
      <a href="/wd-wmt/Setting/index.html">
        <i class="fixed-home"></i>
      </a>

    </div>

    <div v-transfer-dom>
      <loading :show="modelshow==1" :text="加载中"></loading>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="kssm">
        <div class="search">
          <input type="text" v-model="keyword">
          <x-button mini type="primary" @click.native="search">搜索</x-button>
        </div>
        <div class="table">
          <checklist ref="demoObject" :options="objectList" v-model="objectListValue" :max="1"></checklist>
        </div>
        <div class="operate-btn">
          <button class="cancle" @click="kssm=false">取消</button>
          <button class="confirm" @click="queding">确定</button>
        </div>
      </x-dialog>
    </div>
    <scan ref="scan" @scanResult="scanResult" > </scan>
  </div>
</template>

<script>
  import {XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem, XDialog,Checklist } from 'vux'
  import {XInput, Group, XButton, Cell} from 'vux'
  import {XTable, LoadMore} from 'vux'
  import {AjaxPlugin} from 'vux'
  import {Tabbar, TabbarItem} from 'vux'
  import {Loading} from 'vux'
  import dingtalk from 'dingtalk-javascript-sdk';
  import Qs from 'qs'
  import axios from 'axios'
  import  scan  from "./components/scan"
  import   config  from "./common/js/config.js"
  import {Confirm, AlertModule, Alert} from 'vux'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XHeader,
      Actionsheet,
      ButtonTab,
      ButtonTabItem,
      XInput,
      XButton,
      Group,
      Cell,
      XTable,
      LoadMore,
      AjaxPlugin,
      Tabbar,
      TabbarItem,
      Loading,
      dingtalk,
      XDialog,
      Checklist,
      Qs,
      axios,
      scan,
      config
    },
    data () {
      return {
        gh: '',
        keyword:'',
        kssm: false,
        objectListValue: [],
        objectList: [],
        size: '',
        enterText: '',
        valid1: false,
        valid2: false,
        iconType: '',

        style: '',
        disabledValue: 'hello',
        debounceValue: '',
        maxValue: '',
        maskValue: '13545678910',
        maskValue2: '',
        menus: {
          menu1: 'Take Photo',
          menu2: 'Choose from photos'
        },
        showMenus: false,
        returndata: '',
        code: '',
        onepageurl: config.baseurl,
        modelshow: '0',
        IsShowScan:false,
        IsShowStart:false,
        showDeptdata:false,
        bmmc:'',
        djh:'',
        showqh:false
      }
    },
    mounted(){

      this.InitPagedata();
    },

    methods: {

      scanLoad(){//调用组件的扫码方法
        this.$refs.scan.scan();
      },
      scanResult(ops){//返回扫码的结果
        this.Scan(ops.result);
      },

      ExecuteStoredProcedure(){
      var This=this
        if (this.modelshow == '1') {
          return;

        }
        this.modelshow = '1'
        axios.get(this.onepageurl + '/wd-wmt/Inventory/ExecuteStoredProcedure')
          .then(function (response) {
            console.log(response)
            if(response.data){
              This.modelshow = '0'
              This.showdialog()
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      showdialog(){
        this.kssm=true;
        var This=this;
        axios.get(this.onepageurl + '/wd-wmt/Inventory/QueryDept?name='+this.keyword)
          .then(function (response) {
            This.objectList=response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      search(){
        var This=this;
        axios.get(this.onepageurl + '/wd-wmt/Inventory/QueryDept?name='+this.keyword)
          .then(function (response) {
            This.objectList=response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      queding(){
        if( this.objectListValue.length!=0){
          var index=this.objectListValue[0];
          for (var i = 0; i < this.objectList.length; i++) {
            var obj = this.objectList[i];
            if(index==obj.key){
              var  Dept={
                bmxh:obj.key,
                bmdm:obj.id,
                bmmc:obj.value,
              }
              this.submitdialog(Dept)
            }

          }
          this.kssm=false;

        }else {

          this.kssm=false;

        }

      },

      submitdialog(data){

        var This=this
     var dept= Qs.stringify(  {Dept:JSON.stringify(data)})
        axios.post( this.onepageurl+'/wd-wmt/Inventory/SaveBill',
          dept,
          {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
        ).then((data) => {
          This.showDeptdata=data.data.returncode
          This.bmmc=data.data.inventoryDept.bmmc
          This.djh=data.data.djh




        }).catch(e => {
          // 打印一下错误
          console.log(e)
        })

      },
      GetQueryString(name)
      {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)return unescape(r[2]);
        return null;
      },

      InitPagedata () {
        var This=this
        this.$http.post(this.onepageurl + '/wd-wmt/Inventory/QueryIntPage')
          .then((data) => {
            console.log(data.data);
            this.gh = data.data.gh;
            this.size = data.data.size;
        /*    this.IsShowScan=data.data.IsShow;
            this.IsShowStart=! this.IsShowScan*/

            this.showDeptdata=data.data.checkedDept.returncode
            if(data.data.checkedDept.inventoryDept!=null){
              this.bmmc=data.data.checkedDept.inventoryDept.bmmc
            }
            this.djh=data.data.checkedDept.djh
            this.showqh= data.data.showqh

          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },

      checkScan(){
        var This=this
        axios.get(this.onepageurl + '/wd-wmt/Inventory/CheckIsScan')
          .then(function (data) {

            if(data.data.errorcode!=0){
              AlertModule.show({
                title: '',
                content: data.data.message,
                onShow() {
                },
                onHide() {
                }
              })
              setTimeout(() => {
                AlertModule.hide()
              }, 5000)
            }else {

              This.scanLoad()
            }

          })
          .catch(function (error) {
          })
          .then(function () {
          });

      },


      Scan(params){
        this.$router.replace({path: '/second/id', query: {kpbh: params, gh: this.gh, size: this.size}});
      },


      cs(){

        this.$router.replace({path: '/second/id', query: {gh: this.gh, kpbh: '2017080655', size: this.size}});
        /*    this.$router.replace({path:'scan/123'});*/

      }


    }


  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  /*.weui-btn_primary{*/
  /*background-color: rgb(71,134,255);*/
  /*}*/
  #app .overwrite-title-demo {
    margin-top: 5px;
  }
  .card{
    height:40px;
    line-height: 40px;
    display:flex;
    padding-left:10px;
    justify-content: space-between;
  }
  .card .key{
    color:#bbc1cd;
  }
  .card .value{
    color:#343f51;
  }
  .card .itembtn{
    flex:0 0 70px;
  }
  #app .vux-x-icon {
    fill: #F70968;
  }

  #app .cell-x-icon {
    display: block;
    fill: green;
  }

  #app .buttonstyle {
    margin-top: 38%;

  }

  #app .sm-btn {
    background-color: #4786ff !important;
  }

  /*body {*/
  /*height: 500px;*/
  /*}*/
  /**/
  .fhome-wrapper {
    position: fixed;
    top: 50%;
    right: 0;
    width: 32px;
    height: 32px;
  }

  .fhome-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .fixed-home {
    display: block;
    width: 100%;
    height: 100%;
    background: url("./assets/home.png") no-repeat;
    background-position: center;
  }

  .search {
    display: flex;
    padding: 10px 4px 4px 4px;
  }

  .search input {
    flex: 1;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  .operate-btn {
    margin: 15px 0;
  }

  .operate-btn button {
    padding: 8px 30px;
    font-size: 14px;
    border: none;
    border-radius: 16px;
    margin: 0 10px;
  }

  .cancle {
    background-color: #f0f0f0;
    color: #aaa
  }

  .confirm {
    background :#1aad19;
    color: #fff;
  }
  .table{
    max-height:260px;
    overflow-y: auto;
  }
  .table .weui-cell{
    padding:4px !important;
  }
  .weui-dialog{
    max-width:none;
    width:90%;
  }
</style>
